<template>
    <main class="page-bg" id="canvasDom">
        <n-flex vertical>
            <header class="header">
                <section class="head-left">
                    <span>{{today}}</span>
                </section>
                <header class="head-center">大数据可视化展示</header>
                <section class="head-right" data-html2canvas-ignore="true">
                    <ScreenshotKit :downloadName="'大数据可视化展示'" />
                </section>
            </header>
            <section class="main-first">
                <n-grid :x-gap="8" :cols="4" item-responsive responsive="screen">
                    <n-grid-item>
                        <section class="main-first-left">
                            <n-grid :x-gap="4" :cols="2" class="mb15">
                                <n-gi class="count-num mb15">
                                    <p>25,890</p>
                                    <p>总金额</p>
                                </n-gi>
                                <n-gi class="count-num mb15">
                                    <p>1,890</p>
                                    <p>数量</p>
                                </n-gi>
                            </n-grid> 
                            <n-grid :x-gap="4" :cols="2">
                                <n-gi class="circle-progress flex-center mb15" v-for="(item, i) in progressList" :key="i">
                                    <n-progress type="circle" :percentage="item.rate" :color="item.color"
                                    :rail-color="item.color+'60'">
                                        <n-flex vertical>
                                            <span class="progress-rate">{{ item.rate+'%' }}</span>
                                            <span class="progress-name">{{ item.name}}</span>
                                        </n-flex>
                                    </n-progress>
                                </n-gi>
                            </n-grid>
                        </section>
                    </n-grid-item>
                    <n-grid-item span="0 m:2 l:2">
                        <section class="main-first-center">
                            <BarTwo v-if="show" :canvasHeight="370" :data="btData"  />
                        </section>
                    </n-grid-item>
                    <n-grid-item>
                        <section class="main-first-right">
                            <n-grid :x-gap="0" :cols="1" :y-gap="10">
                                <n-gi v-for="(item, i) in pieList" :key="i">
                                    <section class="main-first-left">
                                        <RosePie v-if="show" :id="'rp'+i" :canvasHeight="170" :data="item"  />
                                    </section>
                                </n-gi>
                            </n-grid>
                        </section>
                    </n-grid-item>
                </n-grid>
            </section>
            <section class="main-second">
                <n-grid :x-gap="8" :cols="4" item-responsive responsive="screen">
                    <n-grid-item>
                        <section class="main-second-table">
                            <header class="table-head">订单列表</header>
                            <n-data-table 
                                size="small"
                                :columns="columns" 
                                :data="data" 
                                :bordered="false"
                                :bottom-bordered="false"
                                :style="{ height: `${height}px` }"
                                flex-height
                                :row-class-name="rowClassName"
                            />
                        </section>
                    </n-grid-item>
                    <n-grid-item span="0 m:3 l:3">
                        <n-grid :x-gap="8" :cols="2">
                            <n-gi>
                                <section class="main-first-left">
                                    <LineArea v-if="show" :id="'lineA'" :canvasHeight="340" :data="laData" />
                                </section>
                            </n-gi>
                            <n-gi>
                                <section class="main-first-left">
                                    <DoubleLine  v-if="show" :id="'dline'" :canvasHeight="340" :data="dlData" />
                                </section>
                            </n-gi>
                        </n-grid>
                    </n-grid-item>
                </n-grid>
            </section>
            <section class="main-second">
                <n-grid :x-gap="8" :cols="4" item-responsive responsive="screen">
                    <n-grid-item>
                        <section class="main-second-table">
                            <header class="table-head">订单列表</header>
                            <n-data-table 
                                size="small"
                                :columns="columns" 
                                :data="data" 
                                :bordered="false"
                                :bottom-bordered="false"
                                :style="{ height: `${height}px` }"
                                flex-height
                                :row-class-name="rowClassName"
                            />
                        </section>
                    </n-grid-item>
                    <n-grid-item span="0 m:3 l:3">
                        <n-grid :x-gap="8" :cols="2">
                            <n-gi>
                                <section class="main-first-left map">
                                    <GuangDongMap v-if="show" :canvasHeight="335" :data="mapData" />
                                    <section class="data-legend">
                                        <n-flex v-for="(item, i) in mapData" :key="i" class="flex-start">
                                            <n-icon :size="16" :color="chartStore.colors[i+1]"><LocationSharp /></n-icon> {{ item.name }}
                                        </n-flex>
                                    </section>
                                </section>
                            </n-gi>
                            <n-gi>
                                <section class="main-first-left">
                                    <TravelMode v-if="show" :canvasHeight="335" :data="tmData" />
                                </section>
                            </n-gi>
                        </n-grid>
                    </n-grid-item>
                </n-grid>
            </section>
            <section class="main-footer mb30">
                <n-grid :x-gap="8" :cols="6">
                    <n-gi class="main-first-left flex-center" v-for="i in 6" :key="i">
                        <n-icon :size="40" :color="chartStore.colors7[i+1]"><Apps/></n-icon>
                        <span class="quick-text" :style="{color: chartStore.colors7[i+1]}">快捷操作{{i}}</span>
                    </n-gi>
                </n-grid>
            </section>
        </n-flex>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { createPinia } from 'pinia'
import { LocationSharp,Apps } from '@vicons/ionicons5'
import { DATEFORMAT } from '@/tools/GrobalTools'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import BarTwo from '@/components/charts7/BarTwo.vue';
import RosePie from '@/components/charts7/RosePie.vue';
import DoubleLine from '@/components/charts7/DoubleLine.vue';
import LineArea from '@/components/charts7/LineArea.vue';
import GuangDongMap from '@/components/maps/GuangDongMap.vue';
import TravelMode from '@/components/charts7/TravelMode.vue';
import { NTag,NIcon, NButton, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
const today = ref(DATEFORMAT(new Date().getTime(), 'yyyy年MM月dd日 HH:mm:ss'))
const show = ref(false)
const max = 2000
const min = 1
let btData = reactive({
    xAxisDataList: [],
    
    seriesDataList: [] 
})
let rpData = reactive({
    title: "",
    seriesDataList: [] 
})
let dlData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let laData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let tmData = reactive({
    xAxisDataList: [],
    seriesDataList: [] 
})
let progressList = reactive([])
let pieList = reactive([])
let mapData = reactive([])
type RowData = {
    code: number,
    status: string,
    amount: number
}
const createColumns = ():DataTableColumns<RowData> => {
  return [
    { title: '订单号', key: 'code', ellipsis: { tooltip: true }, align: 'center' },
    { title: '订单金额', key: 'amount', align: 'center' },
    { title: '订单状态', key: 'status', align: 'center' },
    { title: '操作', key: 'actions', align: 'center',
      render (row) {
        return h(
          NButton,
          {
            text: true,
            size: 'small',
            color: '#28e7de',
            textColor: '#2e88cf',
            onClick: () => {}
          },
          { default: () => '完成' }
        )
      }
    }
  ]
}
let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let height = ref(300)
let rowClassName = (row: RowData) => {
    return 'row-data'
}
const init = () => {
    let list = [], list1 = [], list2 = [], plist = []
    for (let index = 0; index < 12; index++) {
        let num = Math.floor(Math.random() * (max - min + 1)) + min;
        btData.xAxisDataList.push((index+1)+'月')
        dlData.xAxisDataList.push((index+1)+'月')
        laData.xAxisDataList.push((index+1)+'月')

        list.push(num)
        list1.push(num*1.25)
        list2.push(num*Math.random().toFixed(2))
    }
    btData.seriesDataList = [
        { name: "小型企业", data: list },
        { name: "中型企业", data: list1 },
        { name: "大型企业", data: list2 },
    ]
    dlData.seriesDataList.push(...[
        { name: "出库量", type: 'line', data: list },
        { name: "入库量", type: 'line', data: list1 },
    ])
    laData.seriesDataList.push(...list)
    progressList.push(...[
        { name: "结算率", rate: 90, color: "#62c98b" },
        { name: "出库率", rate: 80, color: "#1a5ec8" },
        { name: "入库率", rate: 69, color: "#cac861" },
        { name: "损失率", rate: 10, color: "#cb8a64" }
    ])
    pieList.push(...[
        { title: "热销产品", seriesDataList: [
            { value: 50, name: '热销A' },
            { value: 60, name: '热销B' },
            { value: 70, name: '热销C' },
            { value: 88, name: '热销D' },
        ] },
        { title: "季度销比", seriesDataList: [
            { value: 40, name: 'Q1' },
            { value: 80, name: 'Q2' },
            { value: 90, name: 'Q3' },
            { value: 60, name: 'Q4' },
        ] }
    ])
    mapData.push(...[
        { id: 'sz', name: "深圳市", pos: [114.085947,22.547], value: 1000 },
        { id: 'sg', name: "韶关市", pos: [113.591544,24.801322], value: 120 },
        { id: 'yj', name: "阳江市", pos: [111.975107,21.859222], value: 100 },
        { id: 'zh', name: "珠海市", pos: [113.553986,22.224979], value: 150 },
    ])

    columns = createColumns()
    for (let index = 0; index < 7; index++) {
        let obj = {
            key: index,
            code: 'JD1238493'+index,
            status: index%2 === 0 ? '未发货': '已完成',
            amount: 128,
        }
        data.push(obj)
    }

    show.value = true
}
init()
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    /* background-color: #383f49; */
    background: url('../assets/bg.jpeg') no-repeat center;
    background-size: 100% 100%;
    color: #fff;
}
.header {
    width: 100%;
    height: 50px;
    border: 1px solid #0000ff;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #0f2860;
}
.head-left {
    width: 33%;
}
.head-left span {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
}
.head-center {
    width: 33%;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
}
.head-right {
    width: 33%;
    text-align: right;
}
.main-first,
.main-second,
.main-footer {
    margin: 0 16px;
}
.main-first-left,
.main-first-center {
    background-color: #02082c;
    border-radius: 10px;
    border: 1px solid #0000ff;
    padding: 10px 0;
}
.main-first-right {
    border-radius: 10px;
}
.count-num p:first-child {
    width: 100%;
    font-size: 30px;
    font-weight: 600;
    color: #caca57;
    text-align: center;
}
.count-num p:last-child {
    width: 100%;
    font-size: 14px;
    color: #dcdce3;
    text-align: center;
}
.progress-rate {
    font-size: 24px;
    font-weight: 600;
    color: #caca57;
    line-height: 26px;
}
.progress-name {
    font-size: 12px;
    color: #595f73;
    text-align: center;
    margin-top: -5px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb30 {
    margin-bottom: 30px;
}
.main-second-table {
    background-color: #02082c;
    border-radius: 10px;
    border: 1px solid #0000ff;
    padding: 10px 15px;
}
.table-head {
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
}
.map {
    position: relative;
}
.data-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #ffffff;
}
.quick-text {
    font-size: 20;
    font-weight: 600;
    margin-left: 10px;
}
:deep(.row-data td) {
    background-color: #02082c;
    color: #fefefe;
    border-bottom: 1px solid #02082c;
    padding: 6px 2px;
}
:deep(.n-data-table .n-data-table-th) {
    background-color: #02082c;
    color: #fefefe;
    border-bottom: 1px solid #253954; 
}
:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
    background-color: #02082c;
    color: #fefefe;
} 
</style>
